<script src="../node_modules/vue/dist/vue.js"></script>
<script>
// goal:
// - display foo when url is at #foo
// - display bar when url is at #bar
// - bonus: implement links that navigate between #foo and #bar

// to access the current hash:
//window.location.hash
// to listen for hash changes:
//window.addEventListener('hashchange', () => {
//  // read hash and update app
//})
</script>

<div id="app">
  <component :is="url"></component>
  <a @click="routeTo('#foo')" href="#foo">foo</a>
  <a @click="routeTo('#bar')" href="#bar">bar</a>
</div>

<script>
window.addEventListener('hashchange', () => {
  app.url = window.location.hash.slice(1)
})

const app = new Vue({
  el: '#app',
  data: {
    url: 'foo'
  },
  components: {
    foo: { template: `<div>foo</div>`},
    bar: { template: `<div>bar</div>`},
  },
  methods: {
    routeTo (route) {
      window.location.hash = route
      // this.url = route.slice(1)
    }
  }
})
</script>
